<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv = "Content-Type" content = "text/html; charset= utf-8"/>
    <title>APS</title>  
    <!-- Importar los estilos -->  
       <link rel="stylesheet" type="text/css" href="static/extjs/resources/css/ext-all.css" />  
   
    <!-- Importar el ext-all-dev.js -->  
    <script type="text/javascript" src="static/extjs/ext-all-dev.js"></script>
      
    <script type="text/javascript" >  
    Ext.require([     'Ext.form.*', 'Ext.data.*',
             ]);

             Ext.onReady(function() { 

            	    Ext.QuickTips.init();
            	    
            		// Create a variable to hold our EXT Form Panel. 
            		// Assign various config options as seen.	 
            	    var login = new Ext.FormPanel({ 
            	        labelWidth:80,
            	        url:'/login', 
            	        frame:true, 
            	        title:'Bienvenido', 
            	        defaultType:'textfield',
            		monitorValid:true,
            		// Specific attributes for the text fields for username / password. 
            		// The "name" attribute defines the name of variables sent to the server.
            	        items:[{ 
            	                fieldLabel:'Usuario', 
            	                name:'usuario', 
            	                allowBlank:false 
            	            },{ 
            	                fieldLabel:'Contraseña', 
            	                name:'password', 
            	                inputType:'password', 
            	                allowBlank:false 
            	            }],
            	 
            		// All the magic happens after the user clicks the button     
            	        buttons:[{ 
            	                text:'Iniciar Sesión',
            	                formBind: true,	 
            	                // Function that fires when user clicks the button 
            	                handler:function(){ 
            	                    login.getForm().submit({ 
            	                        method:'POST', 
            	                        waitTitle:'Conectando', 
            	                        waitMsg:'Enviando Datos...',
            	 
            				// Functions that fire (success or failure) when the server responds. 
            				// The one that executes is determined by the 
            				// response that comes from login.asp as seen below. The server would 
            				// actually respond with valid JSON, 
            				// something like: response.write "{ success: true}" or 
            				// response.write "{ success: false, errors: { reason: 'Login failed. Try again.' }}" 
            				// depending on the logic contained within your server script.
            				// If a success occurs, the user is notified with an alert messagebox, 
            				// and when they click "OK", they are redirected to whatever page
            				// you define as redirect. 
            	 
            	                        success:function(){ 
            	                        	Ext.Msg.alert('Exito', 'Inicio de Sesión!', function(btn, text){
            					   if (btn == 'ok'){
            			                        var redirect = '/index'; 
            			                        window.location = redirect;
            	                                   }
            				        });
            	                        },
            	 
            				// Failure function, see comment above re: success and failure. 
            				// You can see here, if login fails, it throws a messagebox
            				// at the user telling him / her as much.  
            	 
            	                        failure:function(form, action){ 
            	                            if(action.failureType == 'server'){ 
            	                                //obj = Ext.util.JSON.decode(action.response.responseText); 
            	                                //Ext.Msg.alert('Login Failed!', obj.errors);
            	                                Ext.Msg.alert('Error!', 'Usuario o Contraseña icorrecto');
            	                            }else{ 
            	                                Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText); 
            	                            } 
            	                            login.getForm().reset(); 
            	                        } 
            	                    }); 
            	                } 
            	            }] 
            	    });
            	 
            	 
            		// This just creates a window to wrap the login form. 
            		// The login object is passed to the items collection.       
            	    var win = new Ext.Window({
            	        layout:'fit',
            	        width:300,
            	        height:150,
            	        closable: false,
            	        resizable: false,
            	        plain: true,
            	        border: false,
            	        items: [login]
            		});
            		win.show();
            
             });
             
    </script>  
</head>  
<body>  
    <div id="center"></div>  
</body>  
</html>